<template>
  <div class=" alert alert-success alert-dismissible fade show" role="alert">
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb p-0 mb-0">
        <li class="breadcrumb-item">
          <router-link to="/admin">后台管理</router-link>
        </li>
        <li class="breadcrumb-item" v-for="link in links">
          <router-link :to="link.routePath">{{link.title}}</router-link>
        </li>
      </ol>
    </nav>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
</template>

<script>
  export default {
    props: {
      links: {
        type: Array
      },
    },
  }
</script>

<style scoped lang="scss">
  .breadcrumb {
    background-color: rgba(249, 252, 255, 0);
    font-size: smaller;
  }
  
  a {
    color: rgb(54, 61, 68);
  }
</style>
